<template>
  <div class="scheme-table">
    <div class="table-search">
      <div class="search-left">
        <div class="search-item">
          <el-select
            v-model="searchForm.gradeYear"
            filterable
            placeholder="请选择"
            size="small"
            clearable
            @change="searchData">
            <el-option
              v-for="item in yearOptions"
              :label="item.label"
              :key="item.value"
              :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <el-input
            placeholder="请输入内容"
            v-model="searchForm.title"
            size="small"
            clearable
            @keyup.enter.native="searchData">
            <el-button slot="append" icon="el-icon-search" @click.stop="searchData"></el-button>
          </el-input>
        </div>
      </div>
      <div class="search-right guide-step" id="guide-step-6">
        <el-button type="primary" icon="el-icon-plus" size="small" @click.stop="addScheme">新建考核任务</el-button>
      </div>
    </div>
    <div class="table-box">
      <vxe-table
        stripe
        border
        align="center"
        auto-resize
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        row-id="id"
        height="100%"
        class="table-con">
        <vxe-column type="seq" title="序号"></vxe-column>
        <vxe-column field="title" title="考核周期任务" :min-width="120"></vxe-column>
        <vxe-column field="templateName" title="考核模板" :min-width="120"></vxe-column>
        <vxe-column title="开启考核时间" :min-width="120">
          <template #default="{ row }">
            {{ row.startTime | filterDate }}
          </template>
        </vxe-column>
        <vxe-column title="加分项截止时间" :min-width="120">
          <template #default="{ row }">
            <span v-if="row.needPlusMinusPoints">{{ row.extEndTime | filterDate }}</span>
            <span v-else>-</span>
          </template>
        </vxe-column>
        <vxe-column field="status" title="考核状态" width="100">
          <template #default="{ row }">
            {{ row.status | filterStatus }}
          </template>
        </vxe-column>
        <vxe-column field="createTime" title="创建时间" :width="180">
          <template #default="{ row }">
            {{ row.createTime | filterDate }}
          </template>
        </vxe-column>
        <vxe-column field="createName" title="创建人" width="100"></vxe-column>
        <vxe-column field="oper" title="操作" :width="200" fixed="right">
          <template #default="{ row }">
            <template v-if="row.status === '0'">
              <el-button type="text" style="color: #ff6d56" @click.stop="editScheme(row)">考核对象</el-button>
              <el-button type="text" style="color: #2b78f1" @click.stop="launchScheme(row)">开启考核</el-button>
              <el-button type="text" style="color: #2b78f1" @click.stop="delScheme(row)">删除</el-button>
            </template>
            <template v-else>
              <el-button type="text" style="color: #2b78f1" @click.stop="editScheme(row)">查看</el-button>
            </template>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="table-pagination">
      <slot name="pagination"></slot>
    </div>
  </div>
</template>
<script>
import { formatDate } from '@utility/utility'
import { IND_STEP_STATUS } from '@utility/dict'

export default {
  name: 'SchemeTable',
  emits: ['add-scheme', 'search-list', 'edit-scheme', 'copy-scheme', 'del-scheme', 'launch-scheme'],
  props: {
    yearOptions: {
      type: Array,
      default: () => [],
    },
    source: {
      type: Array,
      default: () => [],
    },
    defaultYear: String,
  },
  data() {
    return {
      searchForm: {
        title: '',
        gradeYear: '',
      },
      schemeStatus: IND_STEP_STATUS._label,
      statusTag: IND_STEP_STATUS._tag,
      typeList: [
        { name: '履职能力', code: '2' },
        { name: '履职效果', code: '1' },
      ],
    }
  },
  filters: {
    filterDate(val) {
      if (val) {
        return formatDate(new Date(val).toLocaleString(), 'yyyy-MM-dd hh:mm:ss')
      }
      return '-'
    },
    filterStatus(val) {
      if (val) {
        return val === '0' ? '未生成' : val === '1' ? '已开启' : '已完成'
      }
    },
  },
  watch: {
    defaultYear: {
      handler(news) {
        this.searchForm.gradeYear = news
      },
      immediate: true,
    },
  },
  methods: {
    addScheme() {
      this.$emit('add-scheme')
    },
    searchData() {
      this.$emit('search-list', this.searchForm)
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    // 跳转到考核详情页面
    toCheckDetail(obj) {
      console.log(obj)
    },
    editScheme(obj) {
      this.$emit('edit-scheme', obj)
    },
    delScheme(obj) {
      this.$confirm('确定要删除当前考核任务吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$emit('del-scheme', obj)
        })
        .catch(() => {})
    },
    launchScheme(obj) {
      this.$emit('launch-scheme', obj)
    },
  },
}
</script>
<style lang="scss" scoped>
.scheme-table {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .table-search {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .search-left {
      width: 100%;
      display: flex;
      align-items: center;
      .search-item + .search-item {
        margin-left: 20px;
      }
    }
  }
  .table-box {
    width: 100%;
    flex: 1;
    position: relative;
  }
  .table-pagination {
    margin-top: 10px;
  }
  ::v-deep .headerStyle {
    background-color: #f0f4f9;
    .vxe-cell {
      color: #333333;
      font-size: 14px;
      span {
        font-weight: 600;
      }
    }
  }
  ::v-deep .rowClass {
    .vxe-cell {
      color: #666666;
      font-size: 14px;
      p,
      div,
      span {
        font-size: 14px;
      }
      .scheme-name.go-namage-name {
        cursor: pointer;
        color: #2b78f1;
      }
    }
  }
}
</style>
